<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>用户分类投放排名</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Row style="margin-bottom: 20px">
                <Col span="5">
                    <city @ProvinceData="childByValue"></city>
                </Col>
                <Col span="3">
                <Select placeholder="垃圾类型" v-model="queryData.typeid" style="width:185px">
                    <Option v-for="item in gcType" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                </Col>
                <Col span="7">
                    <DatePicker v-model="Stime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="开始时间" style="width: 200px"></DatePicker>
                    &nbsp;-&nbsp;
                    <DatePicker v-model="Etime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
                </Col>
            </Row>
            
            <Input class="mr-10" placeholder="业务单号" v-model="queryData.id" style="width:200px;" />
            <Input class="mr-10" placeholder="用户姓名" v-model="queryData.name" style="width:200px;" />
            <Input class="mr-10" placeholder="地址" v-model="queryData.address" style="width:200px;" />
            <Input class="mr-10" placeholder="电话" v-model="queryData.mobilePhone" style="width:200px;" />
            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
// import moment from "moment";
import {Message} from "iview";
import city from "@/view/test/city.vue"
import global from '@/assets/js/global'

  export default {
    components: {
      city
    },
    data() {
      return {
        url: '/api/gcGarbage/list',
        // 乐色类型
        gcType: [
            {name:'废木材',id:16},
            {name:'其他可回收物',id:15},
            {name:'有毒有害',id:14},
            {name:'小家电',id:17},
            {name:'铁类',id:1026},
            {name:'旧衣物',id:1017},
            {name:'可回收垃圾',id:12},
            {name:'塑料类',id:2},
            {name:'纸类',id:4},
            {name:'其他垃圾',id:13},
            {name:'厨余垃圾',id:11},
            {name:'玻璃',id:1121},
        ],
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "序号",
              type: 'index',
              align: "center",
              minWidth: 100
            },
            {
              title: "用户名",
              key: "name",
              align: "center",
              minWidth: 100
            },
            {
              title: "用户电话",
              key: "mobilePhone",
              align: "center",
              minWidth: 100
            },
            {
              title: "用户住址",
              key: "address",
              align: "center",
              minWidth:100,
            },
            {
              title: "分类投放次数",
              key: "pushtimes",
              align: "center",
              minWidth:100,
            },
            {
              title: "定时投放积分",
              key: "pushscore",
              align: "center",
              minWidth:100,
            }
          ]
        },
        // 页面查询数据
        queryData: {
            limit: 10,
            page: 1,
            totalRecord: 0,
            machineid: '', // 机器编号
            startTime: '',
            endTime: ''
        },
        Stime: new Date(),
        Etime: new Date(),
      }
    },
    created() {
      this.getTableData();
    },
    methods: {
      // 获取列表
      async getTableData() {
        this.queryData.startTime = global.time(this.Stime)
        this.queryData.endTime = global.time(this.Etime)
        console.log(this.queryData.startTime,this.queryData.endTime);
        console.log('queryData',this.queryData);
        this.queryData.totalRecord = undefined;
        let result = await gcDispenserApi.getData(this.url,this.queryData)
        console.log(result);
        this.list.tableData = result.data.list;
        this.queryData.totalRecord = result.data.totalRecord;
        this.queryData.limit = result.data.pageSize;
      },
     
      childByValue(newObject) {
        this.queryData.provid = newObject.provid||'';
        this.queryData.cityid = newObject.cityid||'';
        this.queryData.distid = newObject.distid||'';
        this.queryData.strtid = newObject.strtid||'';
        this.queryData.commid = newObject.commid||'';
        this.queryData.comminid = newObject.comminid||'';
      },
      //查询
      inQuire() {
		this.queryData.page=1;
        this.getTableData();
      },
    
      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },
      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },
    },

    
  };
</script>
